<template>
	<div class="box">
		<div id="screenshot">
			<p class="title">糖尿病发病风险等级及其动态分析评估报告</p>
			<table>
				<tr v-if="!info.lastFillFormDate">
					<th>发病危险因素</th>
					<th>
						<p>检查结果</p>
						<p>{{filterData2(info.fillFormDate)}}</p>
					</th>
					<th>评估</th>
					<th>
						<p>检查结果</p>
						<p>日期</p>
					</th>
					<th>评估</th>
					<th><p>风险趋势</p></th>
					<th><p>正常参考<br/>值范围</p></th>
					<th>单位</th>
				</tr>
				<tr v-else>
					<th>发病危险因素</th>
					<th>
						<p>检查结果</p>
						<p>{{filterData2(info.lastFillFormDate)}}</p>
					</th>
					<th>评估</th>
					<th>
						<p>检查结果</p>
						<p>{{filterData2(info.fillFormDate)}}</p>
					</th>
					<th>评估</th>
					<th><p>风险趋势</p></th>
					<th><p>正常参考<br/>值范围</p></th>
					<th>单位</th>
				</tr>
				<template v-if="!info.lastFillFormDate">
					<tr v-for="(item,index) in info.appTnbDiseaseDangeDetails" :key="index">
						<td rowspan="1"><span>{{item.riskFactors}}</span></td>
						<td rowspan="1">
							<!-- <span>{{item.inspectValue}}</span> -->
							<div v-if="item.riskFactors.indexOf('身体活动量少') > -1">
								<p>{{item.inspectValue && item.inspectValue.split('  ')[0] ? item.inspectValue.split('  ')[0] : ''}}</p>
								<p>{{item.inspectValue && item.inspectValue.split('  ')[1] ? item.inspectValue.split('  ')[1] : ''}}</p>
							</div>
							<span v-else>{{item.inspectValue}}</span>
							
						</td>
						
						<td rowspan="1"><span>{{item.assessment}}</span></td>
						<td rowspan="1"><span></span></td>
						<td rowspan="1"><span></span></td>
						<td rowspan="1"><span></span></td>
						<td rowspan="1"><span>{{item.referenceValue}}</span></td>
						<td rowspan="1"><span>{{item.unit}}</span></td>
					</tr>
				</template>
				<!-- <template v-if="!info.lastFillFormDate">
					<tr v-for="(item,index) in info.appTnbDiseaseDangeDetails" :key="index">
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 || item.riskFactors.indexOf('高脂膳食') > -1 ? 2 : 1" v-if="index != 10 && index != 14"><span>{{item.riskFactors}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1"><span>{{item.riskFactors}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.inspectValue}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.assessment}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span></span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span></span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span></span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.referenceValue}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.unit}}</span></td>
					</tr>
				</template> -->
				<!-- <template v-else>
					<tr v-for="(item,index) in info.appTnbDiseaseDangeDetails" :key="index">
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 || item.riskFactors.indexOf('高脂膳食') > -1 ? 2 : 1" v-if="index != 10 && index != 14"><span>{{item.riskFactors}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.lastInspectValue}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.lastAssessment}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.inspectValue}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.assessment}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.lastInspectValue == '无' || item.inspectValue == '无' ? '' :  item.dangeTrend == 0 ? '=' : item.dangeTrend == 1 ? '↑' : '↓' }}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.referenceValue}}</span></td>
						<td :rowspan="item.riskFactors.indexOf('身体活动量少') > -1 ? 2 : 1" v-if="index != 10"><span>{{item.unit}}</span></td>
					</tr>
				</template> -->
				<template v-else>
					<tr v-for="(item,index) in info.appTnbDiseaseDangeDetails" :key="index">
						<td rowspan="1"><span>{{item.riskFactors}}</span></td>
						<td rowspan="1">
							<!-- <span>{{item.lastInspectValue}}</span> -->
							<div v-if="item.riskFactors.indexOf('身体活动量少') > -1">
								<p>{{item.lastInspectValue && item.lastInspectValue.split('  ')[0] ? item.lastInspectValue.split('  ')[0] : ''}}</p>
								<p>{{item.lastInspectValue && item.lastInspectValue.split('  ')[1] ? item.lastInspectValue.split('  ')[1] : ''}}</p>
							</div>
							<span v-else>{{item.lastInspectValue}}</span>
						</td>
						<td rowspan="1"><span>{{item.lastAssessment}}</span></td>
						<td rowspan="1">
							<!-- <span>{{item.inspectValue}}</span> -->
							<div v-if="item.riskFactors.indexOf('身体活动量少') > -1">
								<p>{{item.inspectValue && item.inspectValue.split('  ')[0] ? item.inspectValue.split('  ')[0] : ''}}</p>
								<p>{{item.inspectValue && item.inspectValue.split('  ')[1] ? item.inspectValue.split('  ')[1] : ''}}</p>
							</div>
							<span v-else>{{item.inspectValue}}</span> 
						</td>
						<td rowspan="1"><span>{{item.assessment}}</span></td>
						<td rowspan="1"><span>{{item.lastInspectValue == '无' || item.inspectValue == '无' ? '' :  item.dangeTrend == 0 ? '=' : item.dangeTrend == 1 ? '↑' : '↓' }}</span></td>
						<td rowspan="1"><span>{{item.referenceValue}}</span></td>
						<td rowspan="1"><span>{{item.unit}}</span></td>
					</tr>
				</template>
				<tr v-if="!info.lastFillFormDate">
					<td><span>患病风险</span></td>
					<td colspan="2"><span>{{info.riskIllness}}</span></td>
					<td colspan="2"><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
				</tr>
				<tr v-else>
					<td><span>患病风险</span></td>
					<td colspan="2"><span>{{info.lastRiskIllness}}</span></td>
					<td colspan="2"><span>{{info.riskIllness}}</span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
				</tr>
			</table>
			<div class="decode">
				{{info.comment}}
			</div>
		</div>
	</div>
</template>

<script>
	import {filterData2} from '@/static/js/filter.js'
	import html2canvas from 'html2canvas';
	export default {
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			}
		},
		name:'reportImgType2',
		data() {
			return {
				base64: '',
				consult:['mmHg','','kg/m²','ml/天','次/周','g/天','','g','g','mmol/L','mmol/L','mmol/L','','','','天/周','支/天'],
			}
		},
		methods:{
			filterData2,
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		width: 1032px !important;
		height: 1566px !important;
		margin: 0 100px;
		left: 0;
		top: -10000px;
		// top: 30px;
		#screenshot{
			height: 100%;
		}
		// top: -10000px;
		.title {
			color: #00B25C;
			font-size: 40px;
			font-weight: bold;
			margin-top: 45px;
		}
		table {
			width: 100%;
			border-spacing: 0;
			margin-top: 42px;
			word-wrap: break-word;
			word-break: break-all;
			border-left: 1px solid #06C17D;
			border-radius: 10px;
			tr {
				color: #FFFFFF;
				font-size: 20px;
				color: #00C481;	
				td {
					padding: 6px;
					box-sizing: border-box;
					border-right: 1px solid #06C17D;
					font-size: 18px;
					border-bottom: 1px solid #06C17D;
					background-color: #F6FFFB;
					span{
						display: flex;
						align-items: center;
						min-height:  40px;
					}
					div{
						p{
							border-bottom: 1px solid #06C17D;
							&:nth-last-child(1){
								border: none;
							}
						}
					}
				}
				td:nth-child(1) {
					// border-left: 1px solid #06C17D;
				}
				td:last-child{
				}
			}
			tr:nth-child(odd) {
				td{
					background-color: #E2FBEF;
				}
			}
			tr:first-child{
				color: #FFFFFF;
				height: 92px;
				font-size: 23px;
				border: none;
				th {
					background-color: #00C481;
					height: 92px;	
					line-height: 92px;
					border-radius: 8px 8px 0px 0px;
					border-right: 1px solid #FFFFFF;
					padding-left: 6px;
					box-sizing: border-box;
					font-weight: 500;
				}
				th:nth-child(1),th:nth-child(7) {
					width: 164px !important;										
				}
				th:nth-child(2),th:nth-child(4) {
					// width: 141px;
					padding: 0;
					p {
						height: 46px;
						line-height: 46px;
						border-bottom: 1px solid #FFFFFF;
						padding-left: 8px;
					}
					p:last-child {
						border: none;
						padding-left: 8px;
					}
				}
				th:nth-child(6),th:nth-child(7)  {
					line-height: 0;
					p {
						line-height: 28px;
						margin-top: 18px;
					}
				}
				th:last-child {
					border-right: 1px solid #00C481;
				}
			}
			tr:last-child {
				tr{
					font-weight: bold;
					font-size: 23px;
					min-height: 70px;
					td {			
						border-right: 1px solid #06C17D;
						border-bottom: 1px solid #06C17D;
						
					}
				}
			}
		}
	}
	.decode{
		margin-top: 20px;
		h2{
			font-size: 26px;
			color: #00C481;
			margin-bottom: 20px;
		}
		font-size: 24px;
		color: #00C481;
	}
</style>
